MDX 语法学习

MDX 是一种书写格式，允许在 Markdown 文档中无缝地插入 JSX 代码。你还可以导入（import）组件，例如交互式图表或弹框，并将它们嵌入到内容当中。

以下是一个 Markdown 中嵌入 JSX 的示例。

This is JSX

它还能嵌入一个实时代码编辑器，如下所示：

实时编辑器

function Clock(props) {
  const [date, setDate] = useState(new Date());
  useEffect(() => {
    var timerID = setInterval(() => tick(), 1000);

    return function cleanup() {
      clearInterval(timerID);
    };
  });

  function tick() {
    setDate(new Date());
  }

  return (
    <div>
      <h2>现在是 {date.toLocaleTimeString()}。</h2>
    </div>
  );
}

function Clock(props) {
  const [date, setDate] = useState(new Date());
  useEffect(() => {
    var timerID = setInterval(() => tick(), 1000);

    return function cleanup() {
      clearInterval(timerID);
    };
  });

  function tick() {
    setDate(new Date());
  }

  return (
    <div>
      <h2>现在是 {date.toLocaleTimeString()}。</h2>
    </div>
  );
}

结果

如果需要内嵌 HTML，如锚点链接或粗体类型，可以使用 <pre> 标记、<code> 标记或 <CodeBlock> 组件。

Input: 1 2 3 4
Output: "366300745"

显示多编程语言代码选项卡的示例

JavaScript
Python
Java

function helloWorld() {
  console.log('Hello, world!');
}

def hello_world():
  print 'Hello, world!'

class HelloWorld {
  public static void main(String args[]) {
    System.out.println("Hello, World");
  }
}